<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>短链接生成</title>
	<link rel="icon" href="/img/favicon.ico">
	<link rel="stylesheet" href="/css/base.css">
</head>
<body>
	<div class="box">
		<label for="long" class="inp">
			<input type="text" id="long" placeholder="&nbsp;">
			<span class="label">长链接</span>
			<span class="focus-bg"></span>
		</label>
		<button type="button" id="generate">生成短链接</button>
		<div style="text-align: center;">
			<label for="short" class="inp short">
				<input type="text" id="short" placeholder="&nbsp;">
				<span class="label">短链接</span>
				<span class="focus-bg"></span>
			</label>
			<button type="button" id="copy" style="width:100px;" data-clipboard-action="copy" data-clipboard-target="#short">Copy</button>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
	<script>
		$('#generate').click(() => {
			let longURL = $('#long').val();
			if (longURL) {
				$.post("/generate", {
					longURL
				}, function (res) {
					if (res.code === 200) {
						$('#short').val(res.data);
					} else {
						alert(res.msg);
					}
				}, "json").fail(() => {
					alert('异常错误');
				});
			} else {
				alert('请输入原始链接');
			}
		})
		let clipboard = new ClipboardJS('#copy');
		clipboard.on('success', function (e) {
			e.clearSelection();
			$('#copy').text('Copied!');
			setTimeout(() => {
				$('#copy').text('Copy');
			}, 2000)
		});
	</script>
</body>
</html>